<template>
  <div id="components-form-demo-vuex">
    <a-modal
      :title="formTitle"
      :visible="open"
      @cancel="cancel"
      centered
      footer= ""
    >
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item>
          <a-input
            v-model="replyContent"
            :placeholder="$t('all.autotext1603')"
            type="textarea"
            :maxLength="100"
            allow-clear
            :auto-size="{ minRows: 8, maxRows: 10 }"
            v-decorator="['replyContent', { rules: [{ required: true, message: $t('all.autotext1603') }] }]"
          />
        </a-form-item>
        <a-form-item style="text-align: right">
          <a-button type="primary" html-type="submit">
            {{ $t('all.autotext1611') }}
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { confirmReply } from '@/api/feedback/feedback'

export default {
  name: 'feedSureModal',
  computed: {

  },
  watch: {

  },
  data () {
    return {
      formTitle: this.$t('all.autotext1610'),
      replyContent: undefined,
      id: undefined,
      open: false
    }
  },
  created () {
    this.form = this.$form.createForm(this, {
      onFieldsChange: (_, changedFields) => {
        this.$emit('change', changedFields)
      },
      mapPropsToFields: () => {
        return {
          username: this.$form.createFormField({
            value: this.username
          })
        }
      },
      onValuesChange: (_, values) => {
      }
    })
  },
  methods: {
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
      this.$emit('close')
    },
    /** 传入数据按钮操作 */
    handleConfirm (record) {
      this.id = record.id
      this.open = true
      this.reset()
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if (!(this.replyContent && this.replyContent.replace(/\s+/g, '').length)) {
            this.$message.error(this.$t('all.autotext1603'))
            return
          }
          let parameter = {
            id: this.id,
            replyContent: this.replyContent
          }
          confirmReply(parameter)
            .then((res) => {
              this.$message.success(
                this.$t('all.autotext1586'))
              this.$emit('ok')
              this.cancel()
            })
            .catch(() => {})
        }
      })
    },
    reset () {
    }
  }
}
</script>
<style>
  #components-form-demo-vuex .language-bash {
    max-width: 400px;
    border-radius: 6px;
    margin-top: 24px;
  }
</style>
